<template>
	<!--新闻详细-top标题-->
	<view class="com-top">
		<view class="top-title">{{obj.title}}</view>
		<view class="top-box">
			<view class="top-box-l">
				<image class="top-box-l-img" :src="obj.img"></image>
				<view class="top-box-l-name">{{obj.nickname}}</view>
				<view class="top-box-l-tag" v-show="obj.role_name">{{obj.role_name}}</view>
			</view>
			<view class="top-box-r">{{obj.create_time}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "com-top",
		components: {},
		props: {
			obj: {
				type: Object,
				default () {
					return {
						title: '这是新闻标题这是新闻标题',
						img: '/static/data-img/data-tx.png',
						nickname: '张三',
						role_name: '经理',
						create_time: '2021.2.9'
					}
				}
			}
		},
		data() {
			return {
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-top {
		display: flex;
		flex-direction: column;
		.top-title {
			font-size: 36rpx;
			line-height: 50rpx;
			font-weight: bold;
			color: $font-color-3;
			margin-bottom: 10rpx;
		}

		.top-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top-box-l {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top-box-l-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
					border-radius: 50%;
				}

				.top-box-l-name {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: $font-color-3;
					margin-right: 20rpx;
				}

				.top-box-l-tag {
					height: 32rpx;
					border: 1rpx solid #198FFF;
					padding: 0 10rpx;
					border-radius: 5rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 30rpx;
					color: #198FFF;
				}
			}

			.top-box-r {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: $font-color-9;
			}
		}
	}
</style>
